import React, { Component } from 'react';
import axios from "axios"
import { Row, Col, Input,Tabs } from 'antd';

import {
    ShoppingCartOutlined,
    SearchOutlined,
    LeftOutlined,
    CloseCircleOutlined 
} from '@ant-design/icons';
import "./searchList.scss"
const { TabPane } = Tabs;

class SeachList extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            seachList:[],
            category_name:'',
            sort:0
         }
    }
    componentDidMount() {
        // console.log(this.props.location.search)
        // let keyword=new URLSearchParams(this.props.location.search).get("keyword")
        // // console.log(keyword);
        // axios.get("/act/mop/wosun/search/item/plus?price_sort=0&keyword="+keyword+"&count=20&offset=0&use_input_word=0&keyword_source=1").then((res)=>{
        //     console.log(res.data.data.item_list)
        //     this.setState({seachList:res.data.data.item_list,
        //         category_name:res.data.data.category_name
        //     })
        // })
        this.getData()
    }
    getData=()=>{
        // console.log(this.props.location.search)
        let keyword=new URLSearchParams(this.props.location.search).get("keyword")
        // console.log(keyword);
        axios.get("/act/mop/wosun/search/item/plus?price_sort="+this.state.sort+"&keyword="+keyword+"&count=20&offset=0&use_input_word=0&keyword_source=1").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({seachList:res.data.data.item_list,
                category_name:res.data.data.category_name
            })
        })
    }
    goNext=()=>{
        console.log(this.props);
        this.props.history.go(-1)
        
    }
    changeSort=(ev)=>{
        // console.log(ev)
        let num=ev-1
        console.log(num)
        this.setState({sort:num},()=>{
            this.getData()

        })
        console.log(this.state.sort)
    }

    render() { 
        const {seachList,category_name}=this.state
        return ( 
            <div className="zong">
        <div className="searchList">
            <div className="stop">
                <Row>
                        <Col span={4}> <LeftOutlined onClick={this.goNext} className="home" /></Col>
                        <Col span={16}>
                            <Input disabled style={{borderRadius:"15px"}} onClick={this.onOpen} placeholder={category_name} prefix={<SearchOutlined />} 
                            suffix={
                               <CloseCircleOutlined/>
                              }
                            />
                        
                        </Col>
                        <Col span={4}><ShoppingCartOutlined className="cart" /></Col>
                    </Row>
            </div>
        </div> 

            <div>
                    <Tabs defaultActiveKey="1" onTabClick={this.changeSort}>
                        <TabPane tab="推荐" key="1">
                            {/* <div style={{overflow:"auto"}}> */}
                            <ul className="search_ul">
                                {
                                    seachList.map((item,index)=><li key={item.item_id}>
                                        
                                        <div className="pic"><img src={item.over_image_url} alt=""/></div>
                                        <div className="point">{item.sale_point}</div>
                                        <div className="name">{item.item_short_name}</div>
                                        <div className="price">￥{item.min_price/100}</div>
                                    </li>)
                                }
                            </ul>
                            {/* </div> */}
                        </TabPane>
                        <TabPane tab="价格从低到高" key="3" >
                            <ul className="search_ul">
                                {
                                    seachList.map((item,index)=><li key={item.item_id}>
                                        
                                        <div className="pic"><img src={item.over_image_url} alt=""/></div>
                                        <div className="point">{item.sale_point}</div>
                                        <div className="name">{item.item_short_name}</div>
                                        <div className="price">￥{item.min_price/100}</div>
                                    </li>)
                                }
                            </ul>
                        </TabPane>
                        <TabPane tab="价格从高到低" key="2">
                            <ul className="search_ul">
                                {
                                    seachList.map((item,index)=><li key={item.item_id}>
                                        
                                        <div className="pic"><img src={item.over_image_url} alt=""/></div>
                                        <div className="point">{item.sale_point}</div>
                                        <div className="name">{item.item_short_name}</div>
                                        <div className="price">￥{item.min_price/100}</div>
                                    </li>)
                                }
                            </ul>
                        </TabPane>
                    </Tabs>
            </div>
                    
        </div>
        );
    }
}
 
export default SeachList;